<template>
  <div class="project-details">
    <div>
      <img src="../assets/img/index-banner1.jpg" width="100%">
    </div>
    <!-- <img style="max-width: 100%;height: 200px" :src="this.handlePic(form.pic)" alt="Person imag"> -->
    <div class="project-content">
      <div class="title" style="text-align: center; font-size: 24px; font-weight: bold;">
        <h1><strong>{{ form.name }}</strong></h1>
      </div>

      <div style="text-align: right; font-size: 15px; color: #fff;">
        <div style="display: flex; justify-content: flex-end; flex-direction: column;">
          <div style="margin-bottom: 10px; text-align: right;">
            <label>重点工作 ：{{ form.keyTask }}</label>
          </div>
          <div style="display: flex; justify-content: flex-end;">
            <label style="margin-left: 20px;">浏览量 ：{{ form.clickNum }}</label>
            <label style="margin-left: 20px;">需求人数 ：{{ form.needNum }}</label>
            <label style="margin-left: 20px;">
              人员状态：
              <span v-if="form.isFull === 0">未满</span>
              <span v-else>团队已满</span>
            </label>
          </div>
        </div>
      </div>


      <el-divider></el-divider>
      <div class="description-container">
        <div class="picbox">
          <img class="picbox_img" :src="this.handlePic(form.pic)" alt="Person imag">
          <img class="picbox_img" src="/dev-api/profile/upload/2024/08/23/L7_20240823102304A008.png" alt="Person imag">
          <img class="picbox_img" src="/dev-api/profile/upload/2024/08/23/L7_20240823102304A008.png" alt="Person imag">
          <img class="picbox_img" src="/dev-api/profile/upload/2024/08/23/L7_20240823102304A008.png" alt="Person imag">
          <img class="picbox_img" src="/dev-api/profile/upload/2024/08/23/L7_20240823102304A008.png" alt="Person imag">
        </div>
        <div v-html="form.description" class="rich-text-content"></div>
      </div>
      <div style="text-align: right; font-size: 15px; color: rgb(102, 102, 102);">
        <label>{{ form.createTime }}</label>
      </div>
      <el-divider></el-divider>
      <div style="color: rgb(102,102,102); font-size: 15px; margin-left: 15px ">
        <label v-if="this.hasNext" @click="goNextProject"
               style="display: block;margin-bottom: 10px; cursor: pointer;">上一个:{{ this.nextName }}</label>
        <label v-if="this.hasPre" @click="goPreProject"
               style="display: block;margin-bottom: 10px; cursor: pointer;">下一个:{{ this.preName }}</label>
      </div>

    </div>
  </div>
</template>


<script>
import 'quill/dist/quill.core.css';  // 导入富文本编辑器样式
import {listTopic, getTopic, delTopic, addTopic, updateTopic} from "@/api/project/topic";
import dict from "../utils/dict";
import {getNextProject, getPreProject} from "../api/project/demand";

export default {
  name: 'ProjectDetails',
  dicts: ['project_state', 'project_line', 'team_name', 'check_result', 'is_full'],
  data() {
    return {
      tasks: [ // 假设你有一个包含任务的数组
        {id: 1, name: "5G领先",},
        {id: 2, name: "服务升级",},
        {id: 3, name: "产业链联合",},
        {id: 4, name: "耕云行动",},
        {id: 5, name: "科技创新",},
        {id: 6, name: "绿色低碳",},
        {id: 7, name: "流程风控",},
        {id: 8, name: "网络服务智能化",},
        {id: 9, name: "网格运营",},
        {id: 10, name: "网络安全",},
        {id: 11, name: "人才强企",},
        {id: 12, name: "建强算力",},
        {id: 13, name: "智慧营销",},
        {id: 14, name: "乡村振兴",},
        {id: 15, name: "宽带运营",},
        {id: 16, name: "品牌运营",},
        {id: 17, name: "智慧家庭",},
        {id: 18, name: "党建创新",},
        {id: 19, name: "中台与数据",},
        {id: 20, name: "VR融合运营",},
        {id: 21, name: "员工关爱",},
        {id: 22, name: "政企增收",},
        {id: 23, name: "权益生态",},
        {id: 24, name: "云家庭",},
        {id: 25, name: "8+2战略",},
        {id: 26, name: "产品优化",},
        {id: 27, name: "组织体系",},
        {id: 28, name: "科学管理",},
        {id: 29, name: "产品运营",},
        {id: 30, name: "合作生态",},
        {id: 31, name: "云办公",},
        {id: 32, name: "重点领域改革",},
        {id: 33, name: "生产安全",},
        {id: 34, name: "降本增效",}
      ],
      options: [
        "5G领先",
        "服务升级",
        "产业链联合",
        "耕云行动",
        "科技创新",
        "绿色低碳",
        "流程风控",
        "网络服务智能化",
        "网格运营",
        "网络安全",
        "人才强企",
        "建强算力",
        "智慧营销",
        "乡村振兴",
        "宽带运营",
        "品牌运营",
        "智慧家庭",
        "党建创新",
        "中台与数据",
        "VR融合运营",
        "员工关爱",
        "政企增收",
        "权益生态",
        "云家庭",
        "8+2战略",
        "产品优化",
        "组织体系",
        "科学管理",
        "产品运营",
        "合作生态",
        "云办公",
        "重点领域改革",
        "生产安全",
        "降本增效"
      ],
      selectedOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 需求表格数据
      topicList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      detailOpen: false,
      seeCheckOpen: false,
      seeClaimNeedDetailOpen: false,
      claimNeedDetailForm: {},
      preId: null,
      nextId: null,
      nextName: null,
      hasNext: null,
      hasPre: null,
      preName: null,
      baseUrl: process.env.VUE_APP_BASE_API,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        type: 2,
        line: null,
        prize: null,
        awardTime: null,
        userId: null,
        otherPrize: null,
        state: null,
        needNum: null,
      },
      topicId: null,
      // 表单参数
      form: {},
    };
  },
  created() {
    this.topicId = this.$route.query.id;
    this.from = this.$route.query.from;
    this.initialFrom=this.from;
    this.handleUpdate(this.$route.query.id);
    this.getPreProject(this.$route.query.id,this.initialFrom);
    this.getNextProject(this.$route.query.id,this.initialFrom);
  },
  methods: {
    getPreProject(id,from) {
      getPreProject(id,this.initialFrom).then(response => {
        this.preId = response.data.id;
        if (this.preId === -1) {
          this.hasPre = false;
          this.preName = undefined;
        } else {
          this.hasPre = true;
          this.preName = response.data.name;
        }
      })
    },
    getNextProject(id,from) {
      getNextProject(id,this.initialFrom).then(response => {
        this.nextId = response.data.id;
        if (this.nextId === -1) {
          this.hasNext = false;
          this.nextName = undefined;
        } else {
          this.hasNext = true;
          this.nextName = response.data.name;
        }
      })
    },
    updatePreAndNext() {
      this.getPreProject(this.topicId);
      this.getNextProject(this.topicId);
    },
    goPreProject() {
      this.topicId = this.preId;
      this.handleUpdate(this.topicId);
      this.updatePreAndNext();
    },
    handlePic(pic) {
      return this.baseUrl + pic;
    },
    goNextProject() {
      this.topicId = this.nextId;
      this.handleUpdate(this.topicId);
      this.updatePreAndNext();
    },

    // 线条字典类型翻译
    lineFormat(row, column) {
      return this.selectDictLabel(this.dict.type.project_line, row.line);
    },
    // 操作人1
    check1Format(row, column) {
      return this.selectDictLabel(this.dict.type.team_name, row.checker1);
    },
    // 操作人2
    check2Format(row, column) {
      return this.selectDictLabel(this.dict.type.team_name, row.checker2);
    },
    // 表单重置
    reset() {
      this.checkForm = {
        checker1Id: null,
        checker2Id: null,
        result1: null,
        result2: null,
        suggestion1: null,
        suggestion2: null,
        checker_time1: null,
        checker_time2: null
      };
      this.form = {
        id: undefined,
        name: undefined,
        type: 3,
        description: undefined,
        line: undefined,
        keyTask: undefined,
        keyTask1: undefined,
        keyTask2: undefined,
        keyTask3: undefined,
        prize: undefined,
        awardTime: undefined,
        file: undefined,
        innovation: undefined,
        userId: undefined,
        clickNum: 0,
        otherPrize: undefined,
        checker1: undefined,
        checker2: undefined,
        state: 0,
        needNum: undefined,
        isShow: undefined,
        createTime: undefined
      };
      this.resetForm("form");
    },
    handleUpdate(id) {
      this.reset();
      getTopic(id).then(response => {
        this.form = response.data;
      });
    },
  },

};
</script>

<style scoped>
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
}

.project-details {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 0 100px;
  /* padding: 20px; */
  box-sizing: border-box;
  /* background-repeat: no-repeat;
  background-position: calc(100% - 215px) calc(100% - 100px);
  background-size: auto 100px; */
}

.project-content {
  max-width: 80%; /* 控制内容的最大宽度 */
  width: 100%;
  border: 50px solid #ffffff;
  border-bottom: 0px;
  margin-top: -250px;
  background-color: #ffffffad;
  /* background-color: rgba(255, 255, 255, 0.9); 添加背景颜色，透明度根据需求调整 */
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.description-container {
  width: 100%; /* 边框容器占据父容器的80% */
  margin: 0 auto; /* 自动居中 */
  line-height: 2;
  padding: 10px; /* 可选：添加内边距以增强内容与边框之间的间距 */
}

.picbox {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
.picbox_img {
  width: 200px;
  height: 200px;
  object-fit:contain;
  margin-right: 10px;
  background-color: #ffffffad;
  box-shadow: 0 0 16px rgba(0, 0.1, 0, 0.1);
  border-radius: 4px;
}

.rich-text-content {
  width: 100%; /* 内容占据父容器的100% */
  font-size: 20px;

}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
  text-align: center; /* 居中标题文本 */
  line-height: 1.5;
}

h2 {
  font-size: 18px;
  margin-left: 90px;
  margin-right: 40px;
  line-height: 1.7;
}

h3 {
  margin-top: 30px;
  text-align: right;
  color: rgb(102, 102, 102);
}


p {
  font-size: 23px;
  line-height: 1.6;
  margin-bottom: 15px;
  margin-left: 50px;
  margin-top: 20px;
}

strong {
  font-weight: bold;
}
</style>
